<!DOCTYPE html>
<html>
<head>
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>ImagePicker demo</title>
</head>
<body>
<div class="app">
  <h1>ImagePicker demo</h1>

  <div id="deviceready" class="blink">
    <p class="event listening">Connecting to Device</p>

    <p class="event received">Device is Ready</p>
    <button onclick="getPics()">get pics</button>
  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
  function getPics() {
    imagePicker.getPictures(
        function (result) {
          var content = '';
          for (var i = 0; i < result.length; i++) {
            content += '<img src="' + result[i] + '" style="max-width:200px"/>';
            //content += '<img src="data:image/jpg;base64,'+result[i]+'" style="max-width:200px"/>';
          }
          document.getElementById("imageOutput").innerHTML = content;
        }, function (error) {
          alert('Error: ' + error);
        }, {
          // if no title is passed, the plugin should use a sane default (preferrably the same as it was, so check the old one.. there are screenshots in the marketplace doc)
          maximumImagesCount: 10,
          title: 'Select pix',
          message: 'Pick max 10 items', // optional default no helper message above the picker UI
          // be careful with these options as they require additional processing
          width: 400,
          quality: 80
          //             outputType: imagePicker.OutputType.BASE64_STRING
        }
    );
  }
</script>

<div id="imageOutput">
</div>

</body>
</html>